<template>
  <div>
    <el-upload
      :show-file-list="false"
      :multiple="false"
      :accept="accept"
      :headers="headers"
      action="#"
      :http-request="httpRequest"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-error="handleError"
    >
      <el-button v-loading.fullscreen.lock="fullscreenLoading" size="mini" type="primary">{{ selText }}</el-button>
      <div slot="tip" class="el-upload__tip">注:只支持{{ accept }}格式类型</div>
    </el-upload>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    color: {
      type: String,
      default: '#1890ff'
    },
    upType: {
      type: String,
      default: 'image'
    },
    action: {
      type: String,
      default: process.env.VUE_APP_BASE_API + '/api/console/upload/image/png'
    },
    accept: {
      type: String,
      default: 'image/png,image/jpg,image/jpeg'
    },
    selText: {
      type: String,
      default: '选择图片'
    },
    maxSize: {
      type: Number,
      default: 100
    },
    dataFile: {
      type: Array,
      default: () => null
    }
  },
  data() {
    return {
      headers: {
        'Authorization': getToken()
      },
      fullscreenLoading: false
    }
  },
  watch: {
  },
  methods: {
    httpRequest(e) {
      const data = {}
      const fileType = e.file.type || ''
      const fileArr = fileType.split('/')
      if (fileArr.length > 0) {
        data.type = fileArr[0]
        data.fix = fileArr[1]
      }
      console.log('httpRequest data - %o', data)
      this.$store.dispatch('app/uploadPolice', data).then((res) => {
        console.log('httpRequest uploadPolice - %o', res)
        const formData = res.data
        formData.file = e.file
        this.$store.dispatch('app/uploadToOss', formData).then((res) => {
          if (res.code === 200) {
            this.$message.success('上传成功')
            if (this.dataFile !== null) {
              this.$emit('successCBK', this.dataFile, res.data)
            } else {
              this.$emit('successCBK', res.data)
            }
          } else {
            this.$message.success('上传失败')
          }
        })
      })
      this.fullscreenLoading = false
    },
    handleSuccess(response, file) {
      if (response.code === 200) {
        this.fullscreenLoading = false
        this.$message.success('上传成功')
        if (this.dataFile !== null) {
          this.$emit('successCBK', this.dataFile, response.data)
        } else {
          this.$emit('successCBK', response.data)
        }
      }
    },
    handleError() {
      this.fullscreenLoading = false
      this.$message.error('上传失败')
    },
    beforeUpload(file) {
      this.fullscreenLoading = true
      if (this.upType === 'image') {
        return this.$elUploadBeforeUpload(file)
      }
      // const isJPG = this.accept.indexOf(file.type) !== -1
      // if (!isJPG) {
      //   this.$message.error('上传文件只能是' + this.accept + '格式!')
      //   this.fullscreenLoading = false
      //   return false
      // }
      return true
    }
  }
}
</script>

<style>
.upload-div{
  height:200px;
  width: 100%;
}
.upload-item{
  height: 100%;
  width: 100%;
}
.upload-item img{
  height: 100%;
  width: auto;
}
</style>

